<template>
  <div id="baike-brand"
       v-show="brandShow">
    <div class="brand-wrap">
      <div class="brand-content">
        <div class="close"
             @click="brandClose">
        </div>
        <div class="top">
          <div class="video-wrap"
               v-if="resource.coverVideo"
               @click="videoChange('video' ,resource.coverVideo)">
            <video :src="resource.coverVideo.url"
                   id="video"
                   preload="none"
                   :poster="resource.coverVideo.poster"></video>
            <div class="btn">
              <img v-show="resource.coverVideo.play"
                   src="../../assets/icons/play.png"
                   alt="">
            </div>
          </div>
          <div class="img-wrap">
            <div>
              <img :src="resource.coverImg"
                   alt="">
              <p>{{resource.coverBrand}}</p>
            </div>

          </div>
        </div>
        <div class="bottom">
          <el-tabs v-model="activeName"
                   @tab-click="handleTabClick">
            <el-tab-pane label="Brand presentation"
                         name="first">
              <p v-for="item in resource.contents"
                 :key="item">{{item}}</p>
            </el-tab-pane>
            <el-tab-pane label="Video"
                         name="second">
              <div v-for="(item,index) in resource.videos"
                   class="down-video-wrap"
                   @click="videoChange('small_video_'+ index, item)"
                   :key="item.url">
                    <!-- :poster="item.file_name" -->
                <video :src="item.url"  preload="none" 
                       :id="'small_video_'+ index"></video>
                <div class="btn">
                  <img v-show="item.play"
                       src="../../assets/icons/play.png"
                       alt="">
                </div>
                <div class="time"
                     v-show="item.chu">
                  <span>{{item.mins}}</span>
                </div>
                <div class="file-name">
                  {{item.file_name}}
                </div>
                <div class="create-time">
                  {{item.created_at.slice(0,10)}}
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    resource: {
      type: Object,
      default: function() {
        return {
          coverVideo: {
            url: "",
            poster: ""
          },
          coverImg: "",
          presentation: "",
          videos: [],
          contents: [],
          videoHeight: 300
        };
      }
    },
    brandShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeName: "first"
    };
  },
  mounted() {},
  computed: {
    coverVideo() {
      return this.resource.coverVideo;
    }
  },
  methods: {
    videoChange(id, video) {
      if (video.chu) {
        video.chu = false;
      }
      let dom = document.getElementById(id);
      if (video.play) {
        dom.play();
      } else {
        dom.pause();
      }
      video.play = !video.play;
    },
    brandClose() {
      this.$emit("close");
    },
    handleTabClick() {}
  },
  watch: {
    brandShow(newVal, oldVal) {
      if (newVal) {
        this.$store.commit(
          "titleChange",
          "Wikipedia" + " -- " + this.resource.brand
        );
      } else {
        let dom = document.getElementById("video");
        dom.pause();
        this.resource.coverVideo.play = true;
        this.$store.commit("titleChange", "Wikipedia");
      }
    }
  }
};
</script>

<style  lang="scss">
#baike-brand {
  z-index: 20000;
  margin: 10px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  padding: 10px;
  background-color: #fff;
  .brand-wrap {
    background-color: #fff;
    .brand-content {
      position: relative;
      text-align: left;
      max-width: 1400px;
      margin: 0 auto;
      font-size: 14px;
      color: rgb(89, 89, 89);
      padding-top: 20px;
      padding-bottom: 20px;
      .close {
        position: fixed;
        top: 70px;
        right: 30px;
        float: right;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background-repeat: no-repeat;
        background-image: url("../../assets/icons/close.png");
        &:hover {
          background-image: url("../../assets/icons/close-blue.png");
        }
      }
    }
  }
  .bottom {
    .el-tabs__nav {
      #tab-first {
        font-size: 1.1rem !important;
      }
      #tab-second {
        font-size: 1.1rem !important;
      }
    }
    .el-tabs__content {
      height: calc(50vh - 160px);
      #pane-first {
        height: calc(100% - 30px);
        overflow: auto;
        p {
          font-size: 18px;
          color: #666;
          font-family: "PingFang SC";
          margin-bottom: 20px;
          line-height: 1.5;
          @media screen and (max-width: 1800px) {
            font-size: 14px;
          }
        }
      }
      #pane-second {
        height: calc(100% - 45px);
        overflow-x: scroll;
        padding-top: 10px;
        padding-bottom: 10px;
        white-space: nowrap;
        .down-video-wrap {
          position: relative;
          display: inline-block;
          margin-right: 20px;
          width: 400px;
          @media screen and (max-width: 1800px) {
            width: 200px;
          }
          video {
            width: 100%;
          }
          .btn {
            position: absolute;
            z-index: 30;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 75px;
            height: 75px;
            cursor: pointer;
            img {
              margin-top: 3px;
            }
          }
          .time {
            position: absolute;
            z-index: 30;
            right: 10px;
            bottom: 10px;
            background-color: #333;
            color: #fff;
            padding: 4px;
            cursor: pointer;
            img {
              margin-top: 3px;
            }
          }
          .file-name {
            position: absolute;
            margin-left: 5px;
            margin-top: 5px;
            width: 80%;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
            color: #333!important;
          }
          .create-time {
            position: absolute;
            margin-left: 5px;
            margin-top: 30px;
            font-size: 12px;
            // color: white;
            // color: rgba(0,0,0,.5);
            color: #808080!important;
          }
        }
      }
    }
  }
  .top {
    height: 50vh;
    margin-bottom: 30px;
    background-color: #fafafa;
    display: flex;
  }
  .video-wrap {
    position: relative;
    height: 100%;
    video {
      height: 100%;
    }
    .btn {
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 75px;
      height: 75px;
      cursor: pointer;
      img {
        margin-top: 3px;
      }
    }
  }
  .img-wrap {
    text-align: center;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    p {
      font-size: 22px;
      color: #333;
      font-family: "PingFang SC";
    }
  }
  video {
    cursor: pointer;
  }
}
</style>
